<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书列表信息</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <script src="../../demo/demo.css" type="text/javascript"></script>

    <style type="text/css">
      html, body{
          margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
      }    
      </style>
</head>
<body>
  <body>
    <h1>图书信息列表</h1>

    <div style=" width: 100%;">
        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="add()">增加</a>
                        <a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>       
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="searchBookName" class="mini-textbox" emptyText="请输入图书名称" 
                            style="width:150px;" onenter="onKeyEnter"/> 

                        <input id="searchBookType" class="mini-combobox" allowInput="true" 
                            emptyText="请输入图书名称"
                            url="../../data/booktype.txt" textField="text" valueField="id" 
                            style="width:150px;"  onenter="onKeyEnter"/>

                        <a class="mini-button" onclick="search()">查询</a>
                        <a class="mini-button" onclick="clear()">清空</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>

    </div>
    <!--撑满页面-->
    <div class="mini-fit" >
      <div id="bookInfoDatagrid" class="mini-datagrid" style="width:100%;height:100%;" allowResize="true"
        url="/bookmanagement/bookinfolistaction?method=queryBookinfoByKeyWords" idField="id" multiSelect="true" 
      >
          <div property="columns">
            <div type="indexcolumn" width="40">序号</div>       
            <div type="checkcolumn" ></div>
            <div field="bookId" width="120" headerAlign="center">图书编号</div>    
            <div field="bookName" width="120" headerAlign="center">图书名称</div>    
            <div field="publisher" width="120" headerAlign="center">出版社</div>
            <div field="author" width="60" headerAlign="center">作者</div> 
            <div field="bookType" width="60" headerAlign="center" renderer="onBookTypeRenderer">图书类别</div>
            <div field="remain" width="60" headerAlign="center" renderer="remainRenderer">剩余数量</div>
            <!--操作-->
            <div field="optionButton" width="100" headerAlign="center" align="center" renderer="onOptionRenderer">操作</div>                     
          </div>
      </div>
    </div>
    

<script type="text/javascript">
    mini.parse();

    // 获取表格信息
    var grid = mini.get("bookInfoDatagrid");
    grid.load();


    //////////////////控 件 渲 染///////////////////////////
    // 操作按钮渲染
    function onOptionRenderer(e) {
        var id = e.row.bookId;
        var str = '<a class="mini-button" onclick="editBookInfo(\''+ id +'\')">编辑</a>' + '&nbsp;' +
        '<a class="mini-button" onclick="deleteBookInfo(\''+ id +'\')">删除</a>' + '&nbsp;' +
        '<a class="mini-button" onclick="borrowBookInfoInfo(\''+ id +'\')">借阅</a>' + '&nbsp;' +
        '<a class="mini-button" onclick="bookInfoDetail(\''+ id +'\')">详情</a>';
        return str;
    }

    // 当图书的剩余数量≤10 本时，设置列表中剩余数量字段的字体颜色为红色加粗
    function remainRenderer(e) {
        var remain = e.row.remain;
        if (remain <= 10) {
            e.cellStyle = 'font-weight:bold; color:red;'
        }
        return remain;
    }

    //////////////////相 关 函 数///////////////////////////
    // 编辑按钮事件
    function editBookInfo(id) {
        mini.open({
        url: bootPATH + "../pages/bookinfo/bookinfoedit.html",
        title: "图书信息编辑", 
        width: 600, height: 400,
        onload: function() {
            var iframe = this.getIFrameEl();
            var data = { action: "edit", bookId: id };
            iframe.contentWindow.SetData(data);
        },
        ondestroy: function(action) {
            grid.reload();
        }
        })
    }

    // 删除按钮事件
    function deleteBookInfo(id) {
        deleteByBookIdAjax(id)
    }

    // 借阅按钮事件
    function borrowBookInfoInfo(id) {
        mini.open({
            url: bootPATH + "../pages/borrowinfo/borrowinfoadd.html",
            title: "新增借阅信息", 
            width: 600, height: 450,
            onload: function () {
                var iframe = this.getIFrameEl();
                var data = { action: "bookinfolist", bookid: id};
                iframe.contentWindow.setData(data);
            },
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }
    
    // 详情按钮事件
    function bookInfoDetail(id) {
        mini.open({
        url: bootPATH + "../pages/bookinfo/bookinfodetail.html",
        title: "图书信息详情", 
        width: 600, height: 400,
        onload: function() {
            var iframe = this.getIFrameEl();
            var data = { action: "edit", bookId: id };
            iframe.contentWindow.SetData(data);
        },
        ondestroy: function(action) {
            grid.reload();
        }
        })
    }

    
    // 删除图书
    function remove() {
        var rows = grid.getSelecteds();
        if (rows.length > 0) {
            var ids = [];
            for (var i = 0, l = rows.length; i < l; i++) {
                var r = rows[i];
                ids.push(r.bookId);
            }
            var id = ids.join(',');
            deleteByBookIdAjax(id)
        } else {
            mini.alert("请选择要删除的记录！");
        }
    }


    // 搜索按钮
    function search() {
        var searchBookName = mini.get("searchBookName").getValue();
        var searchBookType = mini.get("searchBookType").getValue();
        grid.load({bookName: searchBookName, bookType: searchBookType});
    }

    // 清空按钮
    function clear() {
        mini.get("searchBookName").setValue(null);
        mini.get("searchBookType").setValue(null);
        grid.load()
    }

    // 回车键搜索
    function onKeyEnter(e) {
        search();
    }


    //////////////////页 面 跳 转///////////////////////////
    // 增加图书按钮
    function add() {
        mini.open({
            url: bootPATH + "../pages/bookinfo/bookinfoadd.html",
            title: "新增图书信息", 
            width: 600, height: 400,
            onload: function () {
                
            },
            ondestroy: function (action) {
                grid.reload();
            }
        });
    }



    //////////////////ajax 请 求///////////////////////////
    // 根据id删除的请求
    function deleteByBookIdAjax(id) {
        mini.confirm("确定删除选中记录？", '提示', function (action) {
            if (action == "ok") {
                $.ajax({
                    url: "/bookmanagement/bookinfolistaction?method=deleteBookinfo&bookIds=" +id,
                    type: 'GET',
                    cache: false,
                    success: function (text) {
                        mini.alert(text, "提示", function (action) {
                            grid.reload();
                        })
                    },
                    error: function () {
                    }
                });
            }
        })
    }


    
    // 处理类别映射
    var bType = [{ id: 1, text: '文学类' }, { id: 2, text: '科技类'}, { id: 3, text: '艺术类'},
        { id: 4, text: '教育类'}, { id: 5, text: '其他'}];
    function onBookTypeRenderer(e) {
        for (var i = 0, l = bType.length; i < l; i++) {
            var g = bType[i];
            if (g.id == e.value) return g.text;
        }
        return "";
    }

</script>
</body>
</html>